<template>
	<!-- 交易确认弹窗-->
	<u-popup :show="moneyShow" bgColor='transparent' mode="center" @close="close" round="60rpx"
		:closeOnClickOverlay='true'>
		<view class="popup-two-box flex-col align-center">
			<u-toast ref="uToastInfo"></u-toast>
			<view class="pass-title" style="">
				安全密码
			</view>
			<view class="">
				<u-code-input borderColor='#FFFFFF00' v-model="pay_password" focus  :maxlength="6"
					dot></u-code-input>
			</view>
			<view class="popup-box-btn align-center justify-center"
			 :style="{background:(disable || loading)?'#8E929D':'#27ff92'}"
			 @click="putLong">
				确定
			</view>
			<view class="tips align-center justify-center" @tap="$navto('/pages/mine/setting/payPass/payPass')">
				忘记密码
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
				default: () => {},
			},
			num: {
				type: Number,
				default: 1,
			},
			loading: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				number: 1,
				moneyShow: false,
				pay_password:'',
			}
		},
		watch: {
			isShow(val) {
				console.log(val, 'modal');
				this.moneyShow = val
				if (val) {}
			}
		},
		computed:{
			disable() {
				return this.pay_password.length != 6
			},
		},
		methods: {
			close() {
				this.$emit('close')
			},
			putLong() {
				if(this.disable) return
				this.$emit('update',this.pay_password)
				this.pay_password = ''
				// this.close()
			}
		}
	}
</script>

<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.popup-two-box {
		position: relative;
		width: 692rpx;
		// height: 967rpx;
		background: #21212D;
		border-radius: 16rpx;
		padding-bottom: 50rpx;

		.pass-title {
			color: #FFFFFF;
			font-weight: bold;
			font-size: 32rpx;
			margin: 52rpx 0 37rpx;
		}

		/deep/ .u-code-input__item {
			background: #292838;
		}

		// box-shadow: 0px 6rpx 14rpx 0px rgba(0, 0, 0, 0.16);
		.info-img {
			margin-top: 159rpx;
			width: 478rpx;
			height: 342rpx;
		}

		.info-btn {}

		.pull-info {
			width: 276rpx;
			height: 82rpx;
			background: linear-gradient(180deg, #FF7D87 0%, #DF0011 100%);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}


		.code-num {
			margin: 40rpx 0 30rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 35rpx;
		}

		.again {
			margin-top: 40rpx;
		}

		.code-date {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.54);
		}

		.popup-box-btn {
			width: 480rpx;
			height: 90rpx;
			background: #0BFF8D;
			color: #000E00;
			font-size: 30rpx;
			border-radius: 8rpx;
			font-weight: bold;
			margin: 50rpx 0 30rpx;
		}

		.tips {
			font-size: 23rpx;
			color: #A6A6B2;
		}


	}
</style>